<template>
  <div class="main-area">
    <imageText :list="list" />
  </div>
</template>

<script>
import imageText from '@/components/ImageTextList';
import { imageTextList } from '@/request/api.js';
export default {
  data () {
    return {
      list: [],
      searchObject: {
        _page: 1,
        _limit: 5
      }
    };
  },
  created() {
    this.getList();
  },
  components: {
    imageText
  },
  watch: {
    // 当父组件该数据发生变化，子组件需要监听其变化重新赋值
    list: {
      handler(newVal, oldVal) {
        this.list = newVal;
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getList() {
      imageTextList(this.searchObject).then((res) => {
        this.list = res;
      });
    },
    handleReachBottom () {
      return new Promise(resolve => {
        this.searchObject._page = this.searchObject._page + 1;
        imageTextList(this.searchObject).then((res) => {
          this.list.push(res);
        });
        resolve();
      });
    }
  }
};
</script>

<style lang="scss" scoped="">
</style>
